<template>

  <el-row>
    <el-col :span="23" :offset="1">
      <h3>配置文件对比</h3>
    </el-col>
  </el-row>

  <!-- <p>{{ bindValue1 }}</p> -->
  <!-- <p>value:{{ diffs }}</p> -->
  <!-- <el-button @click="getDirTree(base_dir.value)">获取目录树</el-button> -->


  <el-row>
    <el-col :span="9" :offset="1">
      <p>旧版本配置文件与最新版本配置文件对比</p>
    </el-col>

    <!-- 分割线 -->
    <el-col :span="3">
      <el-divider direction="vertical" style="height: 53px;" />
    </el-col>

    <el-col :span="11" :offset="0">
      <p>新版本配置文件与目标服务器配置对比</p>
    </el-col>
  </el-row>

  <el-row>

    <!-- 旧版本 -->
    <el-col :span="9" :offset="1">
      <el-form-item label="Source">
        <!-- <el-config-provider :value-on-clear="null" :empty-values="[undefined, null]"> -->
        <el-cascader v-model="bindValue1.src" placeholder="旧版本配置文件" :options="oldTree" :filterable="true"
          clearable />

      </el-form-item>
    </el-col>

    <!-- 分割线 -->
    <el-col :span="3">
      <el-divider direction="vertical" style="height: 50px;" />
    </el-col>

    <!-- 新版本配置文件 -->
    <el-col :span="11">
      <el-form-item label="Source">
        <el-cascader v-model="bindValue2.src" placeholder="新版本配置文件" :options="curTree" filterable />
      </el-form-item>
    </el-col>


  </el-row>

  <el-row>

    <!-- 新版本配置文件 -->
    <el-col :span="9" :offset="1" style="height: 35px;">
      <el-form-item label="Target">
        <!-- <el-config-provider :value-on-clear="null" :empty-values="[undefined, null]"> -->
        <el-cascader v-model="bindValue1.dest" placeholder="新版本配置文件" :options="curTree" :filterable="true"
          clearable />

      </el-form-item>
    </el-col>

    <!-- 分割线 -->
    <el-col :span="3">
      <el-divider direction="vertical" style="height: 50px;" />
    </el-col>

    <!-- 本地配置文件 -->
    <el-col :span="11">
      <el-form-item label="Target">
        <el-cascader v-model="bindValue2.dest" placeholder="本地配置文件" :options="tarTree" filterable />
      </el-form-item>
    </el-col>


  </el-row>

  <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  表单  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->

  <el-row>
    <el-col :span="9" :offset="1">
      <el-button :disabled="bindValue1.src.length === 0 || bindValue1.dest.length === 0"
        @click="commitFrom(bindValue1)">对比</el-button>
    </el-col>

    <!-- 分割线 -->
    <el-col :span="3">
      <el-divider direction="vertical" style="height: 35px;" />
    </el-col>

    <el-col :span="10">
      <el-button :disabled="bindValue2.src.length === 0 || bindValue2.dest.length === 0"
        @click="commitFrom(bindValue2)">对比</el-button>
    </el-col>
  </el-row>


  <!-- 横向分割线 -->
  <el-row>
    <el-col :span="22" :offset="1">
      <el-divider border-style="dashed" />
    </el-col>
  </el-row>


  <el-row>
    <!-- 循环渲染子组件 -->
    <el-col :span="22" :offset="1">
      <!-- loading 遮罩 -->
      <!-- <div v-loading="attr.diffLoading"> -->
      <div v-html="prettyHtml" />
      <!-- </div> -->
    </el-col>
  </el-row>
</template>

<script setup>
import { onBeforeMount, ref, computed } from "vue"
import api from "../../api"
import * as Diff2Html from 'diff2html';
import 'diff2html/bundles/css/diff2html.min.css'; // 引入 Diff2Html 的 CSS

const oldVer = import.meta.env.VITE_OLDVER
const curVer = import.meta.env.VITE_CURVER
const tarGet = import.meta.env.VITE_TARGET

// 接收 diff 后的数据
const diffs = ref('')

// 接收目录树
const oldTree = ref([])
const curTree = ref([])
const tarTree = ref(null)

// 旧版本配置文件与最新版本配置文件对比表单
const bindValue1 = ref({
  "src": [],
  "dest": [],
  "tag": "old2cur"
})
// 新配置文件与最本地配置文件对比表单
const bindValue2 = ref({
  "src": [],
  "dest": [],
  "tag": "cur2target"
})




// function getUser() {
//   api.getUsers().then(res => {
//     data.value = res.data
//   })
// }

// 获取目录树
function getDirTree(base_dir, dest_data) {
  api.dirTree(base_dir).then(res => {
    // console.log(res.data);
    dest_data.value = res.data
  }

  )
}

// 提交表单
function commitFrom(fromData) {
  // const fromData2 = JSON.stringify(fromData)
  api.commitFrom(fromData).then(res => {
    diffs.value = res.data.diff_result
    fromData.src = []
    fromData.dest = []
  })
}

onBeforeMount(
  () => {
    getDirTree(oldVer, oldTree)
    getDirTree(curVer, curTree)
    getDirTree(tarGet, tarTree)
  }
)

const prettyHtml = computed(() => {
  return Diff2Html.html(diffs.value, {
    drawFileList: true,
    matching: 'none',
    outputFormat: 'side-by-side',
    renderNothingWhenEmpty: false, // 内容相同没有改变不输出变化
    fileContentToggle: true, // 启用文件内容折叠功能
    highlight: true, // 启用代码高亮
    synchronisedScroll: true, // 启用同步滚动
    colorScheme: 'auto',
  });
});

</script>